<template>
  <div >
    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div id="one" class="FirstStep">{{$t('table.one')}}</div>
        {{$t('table.guideTip1')}}
        <el-button type="primary" class="indexof" @click="localAreaUnit">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">{{$t('table.two')}}</div>
        <!-- 登记员工信息(部门，工号，姓名，照片等信息(也可通过EXCEL导入))； -->
        {{$t('table.guideTip2')}}
        <el-button type="primary" class="indexof" @click="OrganizationManagement">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">{{$t('table.three')}}</div>
       {{$t('table.guideTip3')}}
        <el-button type="primary" class="indexof" @click="Organization">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div id="tow" class="FirstStep">{{$t('table.four')}}</div>
        {{$t('table.guideTip4')}}
        <el-button type="primary" class="indexof" @click="SetUp">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">{{$t('table.five')}}</div>
        {{$t('table.guideTip5')}}
        <el-button type="primary" class="indexof" @click="Attendance">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row>

    <!-- <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">{{$t('table.six')}}</div>
        {{$t('table.guideTip6')}}<el-button type="primary" size="mini" @click="Worktime">{{$t('table.toOption')}}</el-button>
        <el-button type="primary" class="indexof rightfloat" @click="WorkOvertime">{{$t('table.toOption')}}</el-button>
      </el-col>
    </el-row> -->

    <!-- <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">第七步</div>
        设置节日选择
        <el-button type="primary" class="indexof" @click="Festivals">去操作</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">第八步</div>
        设置正常体温
        <el-button type="primary" class="indexof" @click="temperature">去操作</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">第九步</div>
        查看考勤报表
        <el-button type="primary" class="indexof" @click="attendance">去操作</el-button>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="17" class="colorindex">
        <div class="FirstStep">第十步</div>
        添加多语言设置
        <el-button type="primary" class="indexof" @click="Multilingualism">去操作</el-button>
      </el-col>
    </el-row> -->
    <!-- <el-row type="flex" justify="center">
      <el-col :span="17" >
        <el-button type="primary" class="indexofone" @click.prevent.stop="Open">打开引导</el-button>
      </el-col>
    </el-row> -->
  </div>

</template>

<script>
import Driver from 'driver.js'
import './driver.css'
export default {
  data() {
    return {
      driver: null
    }
  },
  mounted() {
    this.driver = new Driver()
  },
  methods: {
    // 跳转局域网设置
    localAreaUnit() {
      this.$router.push('../../equipment_manage/equipment_info/index')
    },

    // 跳转组织管理
    OrganizationManagement() {
      this.$router.push('../../organization/organization')
    },
    // 跳转员工管理
    Organization() {
      this.$router.push('../../user_manage/user_manage')
    },
    // 跳转考勤管理
    Attendance() {
      this.$router.push('../../attendance_management/AttendanceShift/index')
    },
    // 跳转局域网设置新增
    SetUp() {
      this.$router.push('../../equipment_manage/equipment_info/index')
    },
    // 跳转节日设置
    Festivals() {
      this.$router.push('../../attendance_management/holiday/index')
    },
    // 跳转加班设置
    Worktime() {
      this.$router.push('../../attendance_management/overtime_setting/index')
    },
    // 跳转加班设置
    WorkOvertime() {
      this.$router.push('../../attendance_management/overtime/index')
    },
    // 跳转体温管理
    temperature() {
      this.$router.push('../../BodyTemperature/index')
    },
    // 跳转考勤报表
    attendance() {
      this.$router.push('../../StatisticalReports/AttendanceReport/index')
    },
    // 跳转多语言页面
    Multilingualism() {
      this.$router.push('../../system_setting/setting')
    }
    // 打开引导
    // Open() {
    //   this.driver.defineSteps(steps)
    //   this.driver.start()
    // }

  }
}
</script>

<style>
.colorindex{
  padding: 0 20px 0 20px ;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 40px;
  background-color: #D8D8D8;
}
.FirstStep{
  margin-bottom: 10px;
  margin-top: 20px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #ccc;
}
.ToOperate {
  margin-top: 10px;
  margin-left: 400px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #11C2EE;
  cursor:pointer;
}
.indexof{
  display: flex;
  margin-left: auto;
  margin-bottom: 20px;
  margin-top: 8px;
}
.indexofone{
  display: flex;
  margin: 20px 20px 0 auto ;
}
.rightfloat{
  float: right;
  margin-top: 30px;
}
</style>
